<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>更换头像</span>
        </div>
        <div>
            <!-- 图片，用来展示用户选择的头像 -->
            <div class="avatar">
                <img v-if="avatar" :src="avatar" />
                <img v-else src="../../../assets/images/avatar.jpg" />
                <!-- 第二种方法 使用webpack打包好的图片url地址 -->
                <!-- <img :src="avatar" /> -->
            </div>
            <!-- 按钮区域 -->
            <div class="btn-box">
                <!-- MIME_ TYPE: 因为网络上使用http 协议只能传输二 进制和字符串，通过官方规范的MIMETYPE 来告知对方传输的类型，这就是MIME_ TYPE 的作用-->
                <!-- application/json -->
                <input @change="changeImg" ref="inp" type="file" accept="image/*" style="display:none;">
                <el-button @click="$refs.inp.click()" type="primary" icon="el-icon-plus">选择图片</el-button>
                <el-button @click="uploadAvatar" type="success" icon="el-icon-upload" :disabled="avatar == ''">上传头像
                </el-button>
            </div>
        </div>
    </el-card>
</template>

<script>
//扩展: webpack 处理图片的方式
//如果给图片设置:src 那么webpack 不会将该图片进行打包
//解决方案:直接导入图片，webpack 会帮我们把图片打包到出口，并将打包后的url给我们

// import dafaultImg from '../../../assets/images/avatar.jpg'
// console.log(dafaultImg);

export default {
    name: 'UserAvatar',
    data() {
        return {
            avatar: ''
            // avatar: dafaultImg,
        }
    },
    methods: {
        // 上传用户头像
        async uploadAvatar() {
            const { data: res } = await this.$http.patch('/my/update/avatar', { avatar: this.avatar })
            if (res.code !== 0) return this.$message.error('上传头像失败！')
            this.$message.success('上传头像成功！')
            // 确认修改成功后，重新请求用户信息
            this.$store.dispatch('user/getUserInfo')
        },
        changeImg(e) {
            // console.log(e.target.files);
            // 绑定事件，当用户选择图片，触发事件，
            // e.target.files.length 为 0 用户选择取消，为 1 用户选择图片
            const files = e.target.files
            if (files.length > 0) {
                //  用户选择了图片，显示出来
                // console.log(files[0]);

                // img标签的src 只能设置URL和BASE64
                // this.avatar = files[0]
                //将获取到的文件对象转换成BASE64 或URL

                // 使用方法：
                // 1.获取对象
                const fr = new FileReader()
                // 2.读取文件
                fr.readAsDataURL(files[0])
                // 3.获取读取的结果，事件绑定实现的，事件绑定是异步的
                // 因为文件读取是异步操作，
                fr.onload = (e) => {
                    // console.log(e.target.result);
                    this.avatar = e.target.result
                }
            } else {
                // 用户没选择图片，显示默认图片  
                this.avatar = ''
                // this.avatar = dafaultImg
            }
        }
    },
}
</script>

<style lang="less" scoped>
.avatar img {
    width: 350px;
    height: 100%;
}

.btn-box {
    margin-top: 10px;
}

.preview {
    object-fit: cover;
}
</style>
